<template>
	<div v-if="data" class="separateAccountSet shadow">
        <div class="adaptive-container">
            <div class="item disFlex vertical">
                <div class="item-title">配置</div>
                <div class="describe disFlex vertical">
                    <span>分账:</span>
                    <div>1. 分账：资金从订单支付到按相应比例去到最终归属平台到资金分配过程。</div>
                    <div>2. 关键名词，分账接收方：参与资金分配的接收方；特约商户：即本平台 ；企业：平台合作商户</div>
                    <div>3.开启分账后联系平台客维人员正式在微信后台开通，正式开通后交易资金则走分账系统</div>
                </div>
            </div>
            <!-- <div class="item disFlex vertical" style="padding-bottom: 30px;">
                <div class="item-title">基础设置</div>
                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">是否开启分账</div>
                        <RadioGroup v-model="list.appConfigMallInfo.wap_dynamic_domain" @on-change="changeJumpFn">
                            <Radio label="1">
                                <span>开启</span>
                            </Radio>
                            <Radio label="0">
                                <span>关闭</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                    <div class="des disFlex Flex-middle">
                        <div class="item-span">　</div>
                        <div>一旦开启分帐后，不支持关闭，在此期间方便产品延长使用</div>
                    </div>
                </div>
            </div> -->
            <div class="item disFlex vertical">
                <div class="item-title">分账机制设置</div>
                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">分账缓冲期</div>
                        <RadioGroup value="1" @on-change="changeJumpFn">
                            <Radio label="1">
                                <span>30天</span>
                            </Radio>
                            <!-- <Radio label="0">
                                <span>自定义</span>
                            </Radio> -->
                        </RadioGroup>
                        <!-- <Input v-model="list.wechatInfo.access_appsecret" placeholder="" style="width: 100px" /> -->
                        <!-- <span style="margin-left: 15px;">天</span> -->
                    </div>
                    <div class="des disFlex Flex-middle">
                        <div class="item-span">　</div>
                        <div>用于过期订单的分账，即过期后缓冲才开始分账，在此期间方便产品延长使用期</div>
                    </div>
                </div>
                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span">微信支付结算费率</div>
                        <RadioGroup v-model="data.account_poundage + ''" value="1" @on-change="rateFn">
                            <Radio label="0.6">
                                <span>0.6%</span> 
                            </Radio> 
                            <Radio label="1">
                                <span>1%</span>
                            </Radio> 
                        </RadioGroup>
                        <!-- <Input v-model="data.account_poundage" placeholder="请输入结算费率" style="width: 200px" /> -->
                    </div>
                    <div class="des disFlex Flex-middle">
                        <div class="item-span">　</div>
                        <div>请准确选择微信支付商户号的官方结算费率，否则会导致资金对不上；具体费率可于微信商户平台查看 <span style="color: red;cursor: pointer;">查看示意</span></div>
                    </div>
                </div>
                <div class="item-content disFlex vertical">
                    <div class="disFlex Flex-middle">
                        <div class="item-span"></div>
                        <Button type="primary" @click="saveFn">保存</Button>
                    </div>
                </div>
            </div>
        </div> 
    </div>
</template>

<script>
    // 列表请求/删除列表请求
    import {antiSeal,dynamicDomainState,addUrl,removeUrl,setUrl,openUrl} from 'api/setting'
    import {saveReconciliation,reconciliationSet} from 'api/reconciliation'
    import  cityData  from "common/js/city"

	export default {
		name: 'separateAccountSet',
        data(){
        	return {
        		data: null,
        	}
        },
        created(){
            this.init()
        },
        methods: {
            init(){
                reconciliationSet().then(_data => {
                    // console.log(_data)
                    if(_data.status == 'ok'){
                        this.data = _data.data
                    }
                }).catch(_err => {
                    // console.log(_err)
                })
            },

            // 保存配置
            saveFn(){
                saveReconciliation({
                    accountPoundage: this.data.account_poundage
                }).then(_data => {
                    this.$Message.success('保存成功')
                    
                }).catch(_err => {
                    this.$Message.error(_err.message)
                })
            },
            

            // 域名动态跳转
            changeJumpFn(_data){
                this.list.appConfigMallInfo.wap_dynamic_domain = _data
            },

            // 域名动态跳转
            rateFn(_data){
                this.data.account_poundage = _data
            },

            // 获取密钥
            getKey(){
                window.open("http://file.open.chihe.so/video/%E8%AE%A2%E9%98%85%E5%8F%B7%E5%AF%86%E9%92%A5.png"); 
            },
             // 省改变
            provinceFn(e){
                this.provinceCode = e
                this.areaCode = -1
                this.data3 = this.cityData.filter((item) => {
                    return item.name == e
                })
            },
            comfirmCityFn() {
                let res = {
                    name: `${this.provinceCode}${this.showTag[0].name}`,
                    code: this.areaCode
                }
                this.obj.push(res)
                // console.log(this.obj)
            },
            cityFn(e) {
                this.showTag = ((this.data3)[0].sub).filter(item => {
                    return item.code == e
                })
            }
        }
     }
</script>

<style scoped lang="less">
	.antiSeal {
        padding: 12px 20px 12px 12px;
        box-sizing: border-box;
    } 

    .separateAccountSet{
        margin: 24px 24px 0 24px;
    }

    // 自适应容器
    .adaptive-container {
        background: #fff;

        .item {
            width: 100%;

            .item-title {
                background: #f8f8f9;
                padding: 15px 30px;
                box-sizing: border-box;
                font-size: 12px;
                font-weight: bold;
                color: #464c5b;
            }

            .item-content {
                padding: 15px 30px;
                box-sizing: border-box;

                .item-span {
                    width: 100px;
                }

                .des {
                    margin-top: 10px;
                }
            }

            &>.describe {
            	width: calc(100% - 60px);
            	background: #eee;
            	padding: 30px;
            	margin: 30px;
            	line-height: 30px;
            }

            &>.add-url {
            	padding: 0 30px;
            	box-sizing: border-box;
            }
        }
    } 

    .footer-div {
        width: 100%;
        background: #fff;
        padding: 15px 0;
        box-sizing: border-box;
        border-top: 1px solid #ddd;
    }
</style>

<style type="text/css">

    .separateAccountSet .ivu-table-title {
        border-bottom: 1px solid #eeeeee;
    }
    
    .separateAccountSet .ivu-table:before {
        display: none!important;
        background-color: transparent!important;
    } 

    .separateAccountSet .ivu-table:after {
        width: 0!important;
        height: 100%!important;
        background: transparent!important;
        display: none!important;
    }

    .separateAccountSet .ivu-table-wrapper {
        border: none!important;
    }

    .separateAccountSet tr span {
        font-size: 12px!important;
    }

</style>